import { useNavigate, useParams } from 'react-router-dom';
import {

    PhoneOutlined,
    MessageOutlined,
    CheckCircleOutlined,
    CloseCircleOutlined,
    CreditCardOutlined,
    CheckOutlined,

} from '@ant-design/icons';
import {
    Card,
    Button,
    Table,
    Badge,
    Divider,

    Typography,
    Space,
    
    Row,
    Col,
    Skeleton
} from 'antd';
import 'antd/dist/reset.css';
import { useState } from 'react';


const {Text } = Typography;

const OrderDetail = () => {
    const navigate = useNavigate();
    const [isShow, set_isShow] = useState(true);
    const {id}=useParams();
    console.log(id)
    // 服务项目数据
    const serviceData = [
        {
            key: '1',
            name: '针灸治疗',
            description: '中医辨证：腰肌劳损',
            therapist: '李员工',
            therapistExp: '从业10年',
            duration: '60分钟',
            price: '¥268.00',
            quantity: 1,
            subtotal: '¥268.00'
        },
        {
            key: '2',
            name: '艾草热敷',
            description: '辅助治疗',
            therapist: '-',
            therapistExp: '',
            duration: '20分钟',
            price: '¥50.00',
            quantity: 1,
            subtotal: '¥50.00'
        }
    ];

    // 服务项目表格列定义
    const columns = [
        {
            title: '项目名称',
            dataIndex: 'name',
            key: 'name',
            render: (text, record) => (
                <div>
                    <Text strong>{text}</Text>
                    <div><Text type="secondary" style={{ fontSize: 12 }}>{record.description}</Text></div>
                </div>
            )
        },
        {
            title: '理疗师',
            dataIndex: 'therapist',
            key: 'therapist',
            render: (text, record) => (
                <div>
                    <Text>{text}</Text>
                    {record.therapistExp && (
                        <div><Text type="secondary" style={{ fontSize: 12 }}>{record.therapistExp}</Text></div>
                    )}
                </div>
            )
        },
        {
            title: '时长',
            dataIndex: 'duration',
            key: 'duration',
        },
        {
            title: '单价',
            dataIndex: 'price',
            key: 'price',
        },
        {
            title: '数量',
            dataIndex: 'quantity',
            key: 'quantity',
        },
        {
            title: '小计',
            dataIndex: 'subtotal',
            key: 'subtotal',
        },
    ];

    // 操作记录数据
    const operationRecords = [
        {
            key: '1',
            title: '订单创建',
            time: '2023-06-15 11:00',
            description: '客户王丽创建订单，预约针灸治疗服务',
            icon: <CheckOutlined />,
            color: 'green'
        },
        {
            key: '2',
            title: '支付完成',
            time: '2023-06-15 11:02',
            description: '客户通过会员卡支付成功，金额¥286.20',
            icon: <CheckOutlined />,
            color: 'blue'
        },
        {
            key: '3',
            title: '分配员工',
            time: '2023-06-15 11:05',
            description: '已为客户分配李员工进行理疗服务',
            icon: <CheckOutlined />,
            color: 'purple'
        }
    ];

    setTimeout(() => {
        set_isShow(false)
    }, 1000);
    return (
        isShow ? (<Skeleton paragraph={{ rows: 10 }} active></Skeleton>) : (<div>
            {/* 订单基本信息 */}
            <Card title="订单基本信息" style={{ position: "relative",marginBottom:10 }} className="mb-4">
                <div className="goList"><a onClick={() => {
                    navigate("/order");
                }} className="btn-back">返回订单列表</a></div>

                <Row gutter={[16, 16]}>
                    <Col xs={24} md={12}>
                        <div style={{ marginBottom: 12 }}>
                            <Text type="secondary">订单编号：</Text>
                            <Text strong>ORD20230615002</Text>
                        </div>
                        <div style={{ marginBottom: 12 }}>
                            <Text type="secondary">订单状态：</Text>
                            <Badge status="processing" text="处理中" />
                        </div>
                        <div style={{ marginBottom: 12 }}>
                            <Text type="secondary">下单时间：</Text>
                            <Text>2023-06-15 11:00</Text>
                        </div>
                        <div style={{ marginBottom: 12 }}>
                            <Text type="secondary">预计完成：</Text>
                            <Text>2023-06-15 12:30</Text>
                        </div>
                    </Col>
                    <Col xs={24} md={12}>
                        <div style={{ marginBottom: 12 }}>
                            <Text type="secondary">客户姓名：</Text>
                            <Text>王丽</Text>
                        </div>
                        <div style={{ marginBottom: 12 }}>
                            <Text type="secondary">联系电话：</Text>
                            <Text>139****8765</Text>
                        </div>
                       
                        <div style={{ marginBottom: 12 }}>
                            <Text type="secondary">累计消费：</Text>
                            <Text>¥3,680.00</Text>
                        </div>
                    </Col>
                </Row>

                <Divider />

                <div>
                    <Text strong style={{ display: 'block', marginBottom: 8 }}>客户备注</Text>
                    <Text type="secondary">腰部不适已有一周，希望重点理疗腰部，谢谢！</Text>
                </div>
            </Card>

            {/* 服务项目 */}
            <Card title="服务项目" style={{marginBottom:10}} className="mb-4">
                <Table
                    dataSource={serviceData}
                    columns={columns}
                    pagination={false}
                    bordered
                />

                <div style={{ textAlign: 'right', padding: '16px', borderTop: '2px solid #f0f0f0', marginTop: 16 }}>
                    <Text>合计：</Text>
                    <Text strong style={{ fontSize: 18, color: '#f5222d', marginLeft: 8 }}>¥318.00</Text>
                </div>
            </Card>

            {/* 支付信息 */}
            <Card title="支付信息" style={{marginBottom:10}} className="mb-4">
                <Row gutter={[16, 16]}>
                    <Col xs={24} md={12}>
                        <div style={{ border: '1px solid #e8e8e8', borderRadius: 4, padding: 16 }}>
                            <Text strong style={{ display: 'block', marginBottom: 12 }}>支付详情</Text>
                            <div style={{ marginBottom: 12 }}>
                                <Text type="secondary">支付方式：</Text>
                                <Text><CreditCardOutlined style={{ color: '#1890ff', marginRight: 4 }} />会员卡支付</Text>
                            </div>
                            <div style={{ marginBottom: 12 }}>
                                <Text type="secondary">支付时间：</Text>
                                <Text>2023-06-15 11:02</Text>
                            </div>
                            <div style={{ marginBottom: 12 }}>
                                <Text type="secondary">交易单号：</Text>
                                <Text type="secondary" style={{ fontSize: 12 }}>MC230615110287654</Text>
                            </div>
                        </div>
                    </Col>
                    <Col xs={24} md={12}>
                        <div style={{ border: '1px solid #e8e8e8', borderRadius: 4, padding: 16 }}>
                            <Text strong style={{ display: 'block', marginBottom: 12 }}>费用明细</Text>
                            <div style={{ marginBottom: 12 }}>
                                <Text type="secondary">服务总价：</Text>
                                <Text>¥318.00</Text>
                            </div>
                            <div style={{ marginBottom: 12 }}>
                                <Text type="secondary">会员折扣：</Text>
                                <Text>-¥31.80</Text>
                            </div>
                            <div style={{ marginBottom: 12 }}>
                                <Text type="secondary">实付金额：</Text>
                                <Text strong>¥286.20</Text>
                            </div>
                        </div>
                    </Col>
                </Row>
            </Card>

            {/* 操作记录 */}
            <Card title="操作记录" className="mb-4">
                <Row gutter={[16, 16]}>
                    {operationRecords.map(record => (
                        <Col xs={24} md={8} key={record.key}>
                            <div style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
                                <div
                                    style={{
                                        width: 32,
                                        height: 32,
                                        borderRadius: '50%',
                                        backgroundColor: `${record.color}-100`,
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        marginRight: 12,
                                        color: `${record.color}-600`
                                    }}
                                >
                                    {record.icon}
                                </div>
                                <div>
                                    <Text strong>{record.title}</Text>
                                    <div><Text type="secondary" style={{ fontSize: 12 }}>{record.time}</Text></div>
                                </div>
                            </div>
                            <div style={{ paddingLeft: 44 }}>
                                <Text type="secondary">{record.description}</Text>
                            </div>
                        </Col>
                    ))}
                </Row>
            </Card>

          
        </div>)
    );
};

export default OrderDetail;
